<template>
    <el-table
        v-show="tableData.length"
        class="pbb__table"
        header-cell-class-name="pbb__table-thead"
        cell-class-name="pbb__table-thead-cell"
        row-class-name="pbb__table-thead-row"
        :data="tableData"
        style="width: 100%;height: calc(100% - 96px);overflow-y: auto">
        <el-table-column
            label="序号"
            align="center"
            type="index"
            width="60">
        </el-table-column>
        <template v-for="(item, index) in tableColumn">
            <el-table-column
                :key="index"
                :prop="item.prop"
                :min-width="['createTime', 'nodeCreateDate', 'endDate', 'handleTime'].includes(item.prop)? 200 : item.width || ''"
                :label="item.label"
                show-overflow-tooltip>
                <template slot-scope="scope">
                        <span v-if="item.prop === 'approvalStatus'">
                            {{ scope.row.deleted ? "已删除" : scope.row.approvalStatus === 1 ? "已通过" : "已驳回" }}
                            {{ scope.row.deleted ? "" : scope.row.reason ? ":" + scope.row.reason : "" }}
                        </span>
                    <span v-else>
                            {{ scope.row[item.prop] }}
                        </span>
                </template>
            </el-table-column>
        </template>
        <el-table-column label="操作" width="80">
            <template slot-scope="scope">
                <el-button size="mini" type="text" @click="detailRow(scope.row)">{{ form.status === "1" ? "审批" : "查看" }}</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop } from "vue-property-decorator";
@Component({
    name: "ReceivedTab1NotAlive"
})
export default class ReceivedTab1 extends Vue {
    @Inject("ReceivedList") readonly receivedList!: any;


    @Prop({
         default() {
             return [];
         }
    }) private tableData: any;

    @Prop({
         default() {
             return [];
         }
    }) private tableColumn: any;

    @Prop({
         default() {
             return {};
         }
    }) private form: any;

    detailRow(row: any) {
        this.$router.push({
            name: "TownCreatedAndReceivedDetailList",
            query: {
                name: row.name,
                formId: row.formId,
                processId: row.processId,
                status: row.status,
                taskId: row.id,
                processInstanceId: row.processInstanceId,
                reason: row.reason,
                approvalStatus: row.approvalStatus
            }
        });
    }
}
</script>
